<template>
	<view class="num-box">
		<view @click.stop.preven="numJian" class="num-jian">-</view>
		<input class="num-text" type="text" :value="currentInputValue" />
		<view @click.stop.preven="numJia" class="num-jia">+</view>
	</view>
</template>

<script>
	export default {
		name:'inputNumber',
		props:{
			myNum:{
				type:Number,
				default:1 
				},
			min:{
			   type:Number
			},
			max:{
				type:Number
			}
			},
		data() {
			return {
				currentInputValue:this.myNum,
				currentMin:this.min,
				currentMax:this.max
			}
		},
		components:{
			
		},
		methods: {
			numJia(){
				if(this.currentMax!=undefined) {
					if(parseInt(this.currentInputValue+1)<=this.currentMax) {
					this.currentInputValue = this.currentInputValue+1 ;
					this.$emit('changeNum',parseInt(this.currentInputValue))
				}
				} else {
					this.currentInputValue = this.currentInputValue+1 ;
					this.$emit('changeNum',parseInt(this.currentInputValue))
				}
			},
			numJian(){
				if(this.currentMin!=undefined) {
					if(parseInt(this.currentInputValue-1)>=this.currentMin) {
						this.currentInputValue = this.currentInputValue-1 ;
						this.$emit('changeNum',parseInt(this.currentInputValue))
					}
				} else {
					this.currentInputValue = this.currentInputValue-1 ;
					this.$emit('changeNum',parseInt(this.currentInputValue))
				}
			},
			// 输入框改变
			handleInput: function(e){
				let value = e.target.value ;
				let emitValue = 1 ;
				// 防止输入不合法
					emitValue = parseInt(value) ;
				
				if(emitValue > this.currentMax) {
					emitValue = this.currentMax ;
				}
				
				if( emitValue < this.currentMin) {
					emitValue = parseInt(this.currentMin) ;
				}
				
				this.currentInputValue = emitValue ;
				this.$emit('changeNum',parseInt(this.currentInputValue))
			}
		},					
	}
</script>

<style>
.num-box{
		width: 50%;
		height: 45px;
		margin: 5% auto;
	}
	.num-jia{
		padding: 20rpx;
		width: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 50rpx;
		background-color: #eee;
		float: left;
	}
	.num-jian{
		padding: 20rpx;
		width: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 50rpx;
		background-color: #eee;
		float: left;
	}
	.num-text{
		border: 1px solid #eee;
		padding: 20rpx;
		width: 70rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #ffffff;
		float: left;
	}
</style>
